<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="never">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <!-- jQuery
    ====================================================================== -->
    <script src="/static/js/jquery-1.9.min.js"></script>

    <!-- Fine Uploader New/Modern CSS file
    ====================================================================== -->
    <!--    <link rel="stylesheet" href="//lib.baomitu.com/twitter-bootstrap/4.5.3/css/bootstrap.min.css">-->
    <link href="/static/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/fineuploader/fine-uploader-new.min.css" rel="stylesheet">

    <!-- Fine Uploader jQuery JS file
    ====================================================================== -->
    <script src="/static/fineuploader/jquery.fine-uploader.min.js"></script>
    <script src="/static/js/clipboard.min.js"></script>
    <script src="/static/js/text-image.js"></script>
    <script src="/static/js/layer/layer.js"></script>

    <!-- Fine Uploader Thumbnails template w/ customization
    ====================================================================== -->
    <script type="text/template" id="qq-template-manual-trigger">
        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                     class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="buttons">
                <div class="qq-upload-button-selector qq-upload-button">
                    <div>选择图片</div>
                </div>
                <button type="button" id="trigger-upload" class="btn btn-primary">
                    <i class="icon-upload icon-white"></i> 上 传
                </button>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                             class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"
                          aria-label="Edit filename"></span>
                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">移除</button>
                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">重试</button>
                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">删除</button>
                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>

            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Close</button>
                </div>
            </dialog>

            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">No</button>
                    <button type="button" class="qq-ok-button-selector">Yes</button>
                </div>
            </dialog>

            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
                    <button type="button" class="qq-ok-button-selector">Ok</button>
                </div>
            </dialog>
        </div>
    </script>

    <style>
        #trigger-upload {
            color: white;
            background-color: #00ABC7;
            font-size: 14px;
            padding: 7px 20px;
            background-image: none;
            height: 40px;
        }

        #fine-uploader-manual-trigger .qq-upload-button {
            margin-right: 15px;
        }

        #fine-uploader-manual-trigger .buttons {
            width: 36%;
        }

        #fine-uploader-manual-trigger .qq-uploader .qq-total-progress-bar-container {
            width: 60%;
        }

        .li-images > li {
            list-style: none;
            float: left;
            width: 280px; /*三列图片排列*/
            height: 350px; /*当图片尺寸不一的时候，设置一个高度*/
            overflow: hidden; /*超出隐藏*/
            border: 1px solid rgb(255, 153, 0);
            border-radius: 5px;
            margin: 10px 10px;
        }

        .li-images > li img {
            width: 280px;
            height: 300px;
            object-fit: cover;
        }

        .li-images i {
            margin-right: 30px;
            margin-top: 7px;
        }

        .li-images i:hover {
            cursor: pointer;
        }

        .copy:hover {
            box-shadow: 8px 8px 13px -8px rgba(255, 153, 0, 0.75);
            -webkit-box-shadow: 8px 8px 13px -8px rgba(255, 153, 0, 0.75);
            -moz-box-shadow: 8px 8px 13px -8px rgba(255, 153, 0, 0.75);
        }

        .delete:hover {
            box-shadow: 8px 8px 13px -8px red;
            -webkit-box-shadow: 8px 8px 13px -8px red;
            -moz-box-shadow: 8px 8px 13px -8px red;
        }

    </style>

    <title>Repo-Image-Hosting 😎</title>
</head>
<body>

<a href="https://github.com/hezhizheng/repo-image-hosting" target="_blank" class="github-corner" aria-label="View on GitHub">
    <svg width="70" height="70" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
    </svg>
</a>

<div align="center" class="">
    <h1>
        <a href="https://hzz.cool" target="_blank" style="text-decoration:none;color: rgb(255, 153, 0)">
            Repo-Image-Hosting 🐽
        </a>
    </h1>
</div>

<!-- Fine Uploader DOM Element
====================================================================== -->
<div id="fine-uploader-manual-trigger"></div>

<div class="gitee-images" align="center">
    <h3><span style="color: rgb(255, 153, 0)">{{ .platform }}</span> ：{{ .current_dir }} 目录下的文件</h3>
    <ul class="li-images">
<!--        <li>-->
<!--            <img onerror="handleErrorImg(this)" src="https://gitee.com/static/images/logo-black.svg?t=158106664">-->
<!--            <i title="复制图片链接" data-img_url="" onclick="handleCopy(this)" style="color: rgb(255, 153, 0)" class="fa fa-copy fa-2x copy"></i>-->
<!--            <i title="删除" data-sha="" onclick="handleDel(this)" style="color: #d9534f" class="fa fa-trash fa-2x delete"></i>-->
<!--        </li>-->
    </ul>
</div>

<!-- Your code to create an instance of Fine Uploader and bind to the DOM/template
====================================================================== -->
<script>
    $('#fine-uploader-manual-trigger').fineUploader({
        template: 'qq-template-manual-trigger',
        request: {
            endpoint: '/upload'
        },
        thumbnails: {
            placeholders: {
                waitingPath: '/static/fineuploader/waiting-generic.png',
                notAvailablePath: '/static/fineuploader/not_available-generic.png'
            }
        },
        validation: {
            //allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'svg']
        },

        autoUpload: false,
        callbacks: {
            onDelete: function (id) {
                // ...
            },
            onDeleteComplete: function (id, xhr, isError) {
                //...
            },
            onComplete: function (id, filename, res) {
                console.log("onComplete", id, filename, res)
                if (res.code == 200) {
                    $(".li-images").prepend(
                        "<li>" +
                        "<img data-img_path="+res.data.path+" onError=\"handleErrorImg(this)\" src=" + res.data.url + ">" +
                        "<i title='复制图片链接' data-clipboard-text="+res.data.url+" data-img_url="+res.data.url+" onClick='handleCopy(this)' style='color: rgb(255, 153, 0)' class='fa fa-copy fa-2x copy'></i>" +
                        "<i title='删除' data-img_path="+res.data.path+" data-sha="+res.data.sha+" onClick='handleDel(this)' style='color: #d9534f' class='fa fa-trash fa-2x delete'></i>" +
                        "</li>"
                    )
                }
            },
            onAllComplete: function (success, fail) {
                console.log("onAllComplete", success, fail)
            },
            onError: function (id, name, errorReason, xhrOrXdr) {
                console.log(xhrOrXdr)
                // alert(qq.format("Error on file number {} - {}.  Reason: {}", id, name, errorReason));
            }

        }
    });

    $('#trigger-upload').click(function () {
        $('#fine-uploader-manual-trigger').fineUploader('uploadStoredFiles');
    });

    loadImages()

    var loding = layer.msg('数据加载中...', {
        icon: 16
        ,shade: 0.01
        ,time: 0
    });

    function loadImages() {
        $.ajax({
            url: "/images",
            type: "GET",
            data: {},
            beforeSend:function (){
                loding
            },
            success: function (d) {

                if ( d.data.images == null )
                {
                    //alert("token配置有误，请检查")
                    //console.log("配置错误，或当前目录不存在")
                    layer.msg("配置错误，或当前目录不存在",{time: 2000})
                    return false;
                }

                $.each(d.data.images, function (index, value) {
                    $(".li-images").append(
                        "<li>" +
                        "<img data-img_path="+value.path+"  onError=\"handleErrorImg(this)\" src=" + value.download_url + ">" +
                        "<i title='复制图片链接' data-clipboard-text="+value.download_url+" data-img_url="+value.download_url+" onClick='handleCopy(this)' style='color: rgb(255, 153, 0)' class='fa fa-copy fa-2x copy'></i>" +
                        "<i title='删除' data-img_path="+value.path+" data-sha="+value.sha+" onClick='handleDel(this)' style='color: #d9534f' class='fa fa-trash fa-2x delete'></i>" +
                        "</li>"
                    )
                });
            },
            complete: function(){
                layer.close(loding);
            }
        });
    }

    function handleErrorImg(t){
        //https://hezhizheng.gitee.io/pictest/
        // 加载失败的说明 图片大于 1M， 替换成 gitee 的pages 路径
        // if ( $(t).attr('src').indexOf("gitee.io") == -1 && $(t).attr('src').indexOf("cdn.jsdelivr.net") == -1) {
        //     var path = "https://" + {{ .owner }} + ".gitee.io/" + {{ .repo }} + "/" + $(t).attr("data-img_path")
        //     // console.log($(t).attr('src'),"error.........",path);
        //     $(t).attr('src',path)
        //     $(t).next().attr('data-clipboard-text',path)
        // }

        // 未支持展示的文件类型
        var style = {
            font: 'serif',
            align: 'center',
            color: 'rgba(0, 0, 0, 1)',
            size: 28,
            background: 'rgb(255, 153, 0)',
            stroke: 1,
            strokeColor: 'rgba(0, 0, 0, 1)',
            lineHeight: "280px",
        };

        let textImage = TextImage(style);
        let img = textImage.toDataURL("未支持展示的文件类型\n"+$(t).attr("data-img_path"));
        $(t).attr('src',img)
    }

    function handleDel(t)
    {
        layer.confirm("是否删除？", { title:'提示'}, function(index){
            $.ajax({
                url: "/delete",
                type: "POST",
                data: {
                    sha:$(t).attr("data-sha"),
                    path:$(t).attr("data-img_path"),
                },
                success: function (d) {
                    if (d.code == 200){
                        $(t).parent().remove()
                        layer.msg("已删除",{time: 1500})
                    }else{
                        layer.msg("删除失败")
                        return false;
                    }
                },
            });
            layer.close(index);
        },function (){ // 取消操作
            //console.log("取消操作")
        });
    }

    new ClipboardJS('.copy');

    function handleCopy(t)
    {
        layer.msg("链接 "+$(t).attr("data-img_url")+" 已复制成功",{time: 1500})
    }
</script>
</body>
</html>